<template>
	<view>
		<view v-for="node in nodes" :key="node.id" class="tree-node" :style="{ paddingLeft: level * 20 + 'px' }">
			<u-row>
				<u-col span="9">
					<view class="node-content" :class="{ 'active': activeNode === node.id }"
						@click="handleNodeClick(node)">
						<image src="../static/folder-active.png" v-if="activeNode === node.id" mode="aspectFit"></image>
						<image src="../static/folder.png" v-else mode="aspectFit"></image>
						<text>{{ node.label }}</text>
						<u-icon v-if="node.children && node.children.length != 0" :name="isExpanded(node) ? 'arrow-down' : 'arrow-right'"
							size="16" />
					</view>
				</u-col>
				<u-col span="1">
					<view @click="newFolder(node)">
						<u-icon name="plus-circle" size="16" v-if="fileType==0"/>
					</view>					
				</u-col>	
				<u-col span="1">
					<view @click="editFolder(node)">
						<u-icon name="edit-pen" size="16" v-if="fileType==0"/>
					</view>				
				</u-col>
				<u-col span="1">
					<view @click="delFolder(node)">
						<u-icon name="trash" size="16" v-if="fileType==0"/>
					</view>					
				</u-col>				
			</u-row>
			<view v-if="node.children && isExpanded(node)">
				<TreeNodes :nodes="node.children" :level="level + 1" :activeNode="activeNode" :fileType="fileType"
					@node-click="handleChildClick" @del-folder="delFolder" @edit-folder="editFolder"
					@new-folder="newFolder" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TreeNodes',
		props: {
			nodes: {
				type: Array,
				default: () => []
			},
			level: {
				type: Number,
				default: 0
			},
			fileType: {
				type: [String, Number],
				default: '文件夹'
			},
			activeNode: [String, Number]
		},
		data() {
			return {
				expandedNodes: new Set()
			}
		},
		methods: {
			handleNodeClick(node) {
				if (node.children && node.children.length != 0) {
					this.toggleExpand(node)
				}
				this.$emit('node-click', node)
			},
			handleChildClick(node) {
				this.$emit('node-click', node)
			},
			toggleExpand(node) {
				if (this.expandedNodes.has(node.id)) {
					this.expandedNodes.delete(node.id)
				} else {
					this.expandedNodes.add(node.id)
				}
			},
			isExpanded(node) {
				return this.expandedNodes.has(node.id)
			},
			delFolder(node) {
				// if (node.children) {
				// 	this.toggleExpand(node)
				// }
				this.$emit('del-folder', node)
				// console.log("delFolder",node);				
			},
			editFolder(node){
				this.$emit('edit-folder', node)
			},
			newFolder(node){
				this.$emit('new-folder', node)
			},
		}
	}
</script>

<style scoped>
	.node-content {
		display: flex;
		align-items: center;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 4px;
		transition: all 0.3s;
	}

	.node-content.active {
		background-color: #f0f7ff;
		color: #2979ff;
	}

	.node-content text {
		margin-right: 8px;
	}

	.node-content image {
		display: block;
		width: 30rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}

	.tree-node {
		padding: 8rpx 0;
		box-sizing: border-box;
	}

	.node-content {
		padding: 20rpx;
		margin: 0 20rpx;
		box-sizing: border-box;
	}

	@media (min-width: 768px) {
		.tree-node {
			padding: 8px 0;
			box-sizing: border-box;
		}

		.node-content {
			padding: 10px;
			margin: 0;
			box-sizing: border-box;
		}
	}
</style>